<template>
<div id='divId' :style="{height: '450px',width: tableWidth}">
    <el-form>
      <el-form-item label='年份选择'>
        <el-select v-model='value' placeholder='请选择年份' @change='selectTime'>
          <el-option
            v-for='item in years'
            :key='item.value'
            :label='item.lable'
            :value='item.value'
            >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
      <!-- 使用TenderActivityWindow弹框界面 -->
    <div>
        <el-dialog :visible.sync='windowVisible' append-to-body :close-on-click-modal='false'>
            <TenderActivityWindow v-if='windowVisible' ref='popWindow' v-on:closeWindow='closeWindow' v-on:updateWindow='updateWindow'></TenderActivityWindow>
        </el-dialog>
    </div>

    <el-row>
      <el-col :span='24'>
          <el-table :data='tableData.slice((pageNo-1)*page_size,pageNo*page_size)' size='mini' style='width: 100%;' max-height='450' header-cell-class-name='table-header-gray' v-loading='isShowloading' border='1px solid gray'>
          <el-table-column type='index' align='center' label='序号' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='clueName' align='center' label='信息提供人' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='name' align='center' label='项目前期跟踪' width='120' show-overflow-tooltip></el-table-column>
          <el-table-column prop='keyName' align='center' label='关键因素项目成功推动' width='160' show-overflow-tooltip> </el-table-column>
          <el-table-column prop='contracts' align='center' label='成功落地签订合同' width='130' show-overflow-tooltip></el-table-column>
          <el-table-column prop='idGetDate' align='center' label='领取编号日期' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='projectId' align='center' label='项目编号'  width='120' show-overflow-tooltip></el-table-column>
          <el-table-column prop='projectName' align='center' label='项目名称' width='150' show-overflow-tooltip></el-table-column>
          <el-table-column prop='customName' align='center' label='业主名称' width='150' show-overflow-tooltip></el-table-column>
          <el-table-column prop='projectArea' align='center' label='项目区域'  width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='contractGetDate' align='center' label='领取合同日期'  width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='contractGetState' align='center' label='合同收回情况' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='contractAmount' align='center' label='合同金额（元）' width='120' show-overflow-tooltip></el-table-column>
          <el-table-column prop='tenderType' align='center' label='招标类型' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column label='操作' align='center' fixed='right' width='100' show-overflow-tooltip>
              <template slot-scope='scope'>
              <el-button type='text' @click='handleEdit(scope.$index, scope.row)' icon='el-icon-edit' size='mini'>编辑</el-button>
              </template>
          </el-table-column>
          </el-table>
          <el-row type='flex' justify='end' style='margin-top: 10px;'>
          <el-pagination background
              @size-change='handleSizeChange'
              @current-change='handleCurrentChange'
              :current-page='pageNo'
              :page-size='page_size'
              :page-sizes='[10, 20, 30]'
              layout='total, prev, pager, next, sizes'
              :total='total'>
          </el-pagination>
          </el-row>
      </el-col>
    </el-row>
</div>

</template>

<script>
import TenderActivityWindow from '@/components/views/TenderActivityWindow';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
export default {
  components: {
    TenderActivityWindow
  },
  data () {
    return {
      tableWidth: '',
      screenWidth: document.documentElement.clientWidth, // 屏幕宽度
      windowVisible: false,
      addOperate: undefined,
      tableData: [],
      years: [],
      value: '',
      total: 0,
      page_size: 10,
      pageNo: 1,
      isShowloading: false,
      year: ''
    };
  },
  watch: {
    'screenWidth': function (val) { // 监听屏幕宽度变化
      this.tableWidth = (Number(val) - 620) + 'px';
    }
  },
  mounted: function () {
    this.tableWidth = this.screenWidth - 620 + 'px'
    var _this = this;
    window.onresize = function () { // 定义窗口大小变更通知事件
      _this.screenWidth = document.documentElement.clientWidth; // 窗口宽度
    };
    this.loadYears();
    this.loadTableData();
  },
  methods: {
    loadYears () {
      let currentYear = new Date().getFullYear();
      this.value = currentYear;
      this.year = currentYear;
      this.years = [];
      this.years.push({value: '全部', lable: '全部'});
      for (let i = 0; i < 11; i++) {
        this.years.push({value: (currentYear - i), label: (currentYear - i) + '年'});
      }
    },
    // 年份选择
    selectTime (data) {
      this.year = data;
      this.loadTableData();
    },
    /**
     * 获取表格数据
     */
    loadTableData () {
      let params = {
        size: this.page_size,
        current: this.pageNo,
        year: this.year
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.listTender(this, params).then(res => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadTableData()
    },
    handleSizeChange (val) {
      this.page_size = val
      this.loadTableData()
    },
    currentChange (val) {
      this.pageNo = val
      this.loadTableData()
    },
    // 编辑
    handleEdit (index, row) {
      this.windowVisible = true;
      this.addOperate = false;
      this.$nextTick(() => {
        let copy = Object.assign({}, row); // row是所编辑本行内数据对象
        this.thisEditRow = copy;
        this.$refs.popWindow.dataInit(copy);
        // this.$refs.popWindow.dataInit(row);
      });
    },
    closeWindow () {
      this.windowVisible = false;
    },
    updateWindow () {
      this.windowVisible = false;
      this.loadTableData()
    }
  }
};
</script>
